<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>运输量统计</title>
		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
	</head>
	<body>
		<div class="layui-form-item" style="width: 700px;margin: 50px auto;">
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<br>
					<br>
					<label class="layui-form-label">请选择车牌</label>
					<div class="layui-input-inline">
						<select name="carid" id="carid" lay-filter="carid"></select>
					</div>
					<label class="layui-form-label">请选择年份</label>
					<div class="layui-input-inline">
						<select name="year" id="year" lay-filter="year"></select>
					</div>
				</div>
				<div id="main" style="width:600px;height:600px;margin-top:50px;"></div>
			</form>
		</div>

	</body>
	<script src="../../js/echarts.common.min.js"></script>
	<script src="../../jss/jquery.js"></script>
	<script src="../../jss/vue.js"></script>
	<script src="../../layui/layui.js" charset="utf-8"></script>
	<script src="../../js/application.js"></script>
	<script type="text/javascript">
		layui.use(['element', 'layer', 'carousel', 'table', 'jquery', 'form'], function() {
			var element = layui.element;
			var carousel = layui.carousel;
			var table = layui.table;
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;

			//页面加载时，获取年份下拉菜单选项
			$(document).ready(function() {
				getyear();
				getcar();
				getdata();
			})

			//下拉框改变事件
			form.on('select(year)', function(data) {
				getdata();
			})
			form.on('select(carid)', function(data) {
				getdata();
			})

			//获取年份下拉菜单选项
			function getyear() {
				var myDate = new Date();
				var startYear = myDate.getFullYear() - 50; //起始年份 
				var endYear = myDate.getFullYear(); //结束年份 
				var obj = document.getElementById('year')
				for (var i = endYear; i >= startYear; i--) {
					obj.options.add(new Option(i, i));
				}
				obj.options[0].selected = 1;
				form.render('select')
			}

			//获取车牌下拉菜单选项
			function getcar() {
				$.ajax({
					type: "post",
					url: urlapi + "chart/getcarlist",
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					dataType: "json",
					data:{
						status:'已完成'
					},
					async: false,
					success: function(succ) {
						if (succ.code == 0) {
							//vue.tasklist = succ.data
							var obj = document.getElementById('carid')
							for (var i = 0; i < succ.data.length; i++) {
								obj.options.add(new Option(succ.data[i].carid, succ.data[i].carid));
							}
							obj.options[0].selected = 1;
							form.render('select')
						} else {
							layer.msg(succ.msg, {
								icon: 5
							});
						}
					},
					error: function() {
						layer.msg('请求失败，稍后再试', {
							icon: 5
						});
					}
				});
			}

			//获取图表数据
			function getdata() {
				var carid = $("#carid").val();
				var year = $("#year").val();
				$.ajax({
					type: "post",
					url: urlapi + "chart/gettasknum",
					data: {
						year: year,
						carid: carid
					},
					xhrFields: {
						withCredentials: true
					},
					crossDomain: true,
					dataType: "json",
					async: false,
					success: function(succ) {
						if (succ.code == 0) {
							var myChart = echarts.init(document.getElementById('main'),'light');
							myChart.setOption({
								title:{
									text:carid+" "+year+"年 运输量统计",
									x:'center',
									y:'top',
								},
								legend: {
									top:"6%"
								},
								tooltip: {
									formatter: "{b}: 运输量：{c} (占比{d}%)"
								},
								series: [{
									type: 'pie',
									radius: '70%',
									//center: ['50%', '25%'],
									label: {
										formatter: '{b}: 运输量：{c} (占比{d}%)'
									},
									data: succ.data
								}]
							});
						} else {
							layer.msg(succ.msg, {
								icon: 5
							});
							var myChart = echarts.init(document.getElementById('main'));
							myChart.setOption({//更新xAxis和series的数据
								series: [{
									type: 'pie',
									radius: '70%',
									//center: ['50%', '25%'],
									label: {
										formatter: '{b}: 运输量：{c} (占比{d}%)'
									},
									data: []
								}]
							});
						}
					},
					error: function() {
						layer.msg('请求失败，稍后再试', {
							icon: 5
						});
					}
				});
			}
		});
	</script>
</html>
